<template>
   <div>
      <!-- 新增员工弹层组件 -->
      <el-dialog :visible="showDialog" title="新增员工" @close="btnCancel">
         <!-- 表单 -->
         <el-form
            label-width="120px"
            :model="formData"
            :rules="rules"
            ref="addEmployee"
         >
            <el-form-item label="姓名" prop="username">
               <el-input
                  style="width:50%"
                  placeholder="请输入姓名"
                  v-model="formData.username"
               ></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
               <el-input
                  style="width:50%"
                  placeholder="请输入手机号"
                  v-model="formData.mobile"
               ></el-input>
            </el-form-item>
            <el-form-item label="入职时间" prop="timeOfEntry">
               <el-date-picker
                  style="width:50%"
                  placeholder="请选择入职时间"
                  v-model="formData.timeOfEntry"
               ></el-date-picker>
            </el-form-item>
            <el-form-item label="聘用形式" prop="formOfEmployment">
               <el-select
                  style="width:50%"
                  placeholder="请选择"
                  v-model="formData.formOfEmployment"
               >
                  <el-option
                     v-for="item in EmployeeEnum.hireType"
                     :key="item.id"
                     :label="item.value"
                     :value="item.id"
                  ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="工号" prop="workNumber">
               <el-input
                  style="width:50%"
                  placeholder="请输入工号"
                  v-model="formData.workNumber"
               ></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="departmentName">
               <el-input
                  style="width:50%"
                  placeholder="请选择部门"
                  v-model="formData.departmentName"
                  @focus="getDepartments"
               ></el-input>
               <!-- 放置一个树形组件 -->
               <!-- node-click 节点被点击时的回调 
               共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、
               节点对应的 Node、节点组件本身。
               -->
               <el-tree
                  v-loading="loading"
                  v-if="showTree"
                  :data="treeData"
                  :props="{ label: 'name' }"
                  :default-expand-all="true"
                  @node-click="selectNode"
               ></el-tree>
            </el-form-item>
            <el-form-item label="转正时间" prop="correctionTime">
               <el-date-picker
                  style="width:50%"
                  placeholder="请选择转正时间"
                  v-model="formData.correctionTime"
               ></el-date-picker>
            </el-form-item>
         </el-form>
         <!-- 下边确定取消 -->
         <el-row type="flex" justify="center" slot="footer">
            <el-col :span="6">
               <el-button size="small" type="primary" @click="btnOK">
                  确定
               </el-button>
               <el-button size="small" @click="btnCancel">取消</el-button>
            </el-col>
         </el-row>
      </el-dialog>
   </div>
</template>

<script>
import { getDepartments } from '../../../api/departments'
import { transListToTreeData } from '../../../utils/index'
import EmployeeEnum from '@/api/constant/employees'
import { addEmployee } from '../../../api/employees'
export default {
   props: {
      showDialog: {
         type: Boolean,
         default: false
      }
   },
   data() {
      return {
         // 把引入的数据变成 data 的数据
         EmployeeEnum: EmployeeEnum,
         // 表单数据
         formData: {
            username: '',
            mobile: '',
            formOfEmployment: '',
            workNumber: '',
            departmentName: '',
            timeOfEntry: '',
            correctionTime: ''
         },
         // 校验规则
         rules: {
            username: [
               {
                  required: true,
                  message: '用户姓名不能为空',
                  trigger: 'blur'
               },
               {
                  min: 1,
                  max: 4,
                  message: '用户姓名为1-4位',
                  trigger: 'blur'
               }
            ],
            mobile: [
               {
                  required: true,
                  message: '手机号不能为空',
                  trigger: 'blur'
               },
               // pattern 是正则表达式的意思，如果满足就通过校验，如果不满足就不通过
               {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '您的手机号格式不正确',
                  trigger: 'blur'
               }
            ],
            formOfEmployment: [
               {
                  required: true,
                  message: '聘用形式不能为空',
                  trigger: 'blur'
               }
            ],
            workNumber: [
               { required: true, message: '工号不能为空', trigger: 'blur' }
            ],
            departmentName: [
               {
                  required: true,
                  message: '部门不能为空',
                  // 这里设置为 change，不想一离开焦点就校验，因为离开焦点选择部门
                  trigger: 'change'
               }
            ],
            timeOfEntry: [
               { required: true, message: '入职时间', trigger: 'blur' }
            ]
         },
         // 定义一个数组接受树形结构
         treeData: [],
         // 默认不显示 选择部门的树形结构
         showTree: false,
         // 进度条
         loading: false
      }
   },
   methods: {
      // 获取焦点选择部门
      async getDepartments() {
         this.showTree = true
         this.loading = true
         // depts 是一个数组 需要转换成树形结构，才可以被 el-tree 显示
         const { depts } = await getDepartments()
         this.treeData = transListToTreeData(depts, '')
         this.loading = false
      },
      // 树形结构点击时的回调
      selectNode(node) {
         // 把所有的参数都打印出来了
         // console.log(arguments)
         this.formData.departmentName = node.name
         this.showTree = false
      },
      // 点击确定
      async btnOK() {
         try {
            await this.$refs.addEmployee.validate()
            // 校验成功 调用新增接口
            await addEmployee(this.formData)
            // 通知父组件 更新数据
            // this.$parent 取到父组件的实例,不能放到 ele-ui 的插槽里，
            // parent 就不是当前的父组件了
            // 直接调用父组件的方法， 判断一下看父组件有没有
            this.$parent.getEmployeeList && this.$parent.getEmployeeList()
            this.$parent.showDialog = false
            // 这里不用重置，因为关闭弹层触发 close 事件，close 绑定 取消的方法
         } catch (error) {
            console.log(error)
         }
      },
      // 点击取消
      btnCancel() {
         this.formData = {
            username: '',
            mobile: '',
            formOfEmployment: '',
            workNumber: '',
            departmentName: '',
            timeOfEntry: '',
            correctionTime: ''
         }
         // 移除之前的校验
         this.$refs.addEmployee.resetFields()
         // this.$parent.showDialog = false
         this.$emit('update:showDialog', false)
      }
   }
}
</script>

<style lang="scss" scoped></style>
